import { CSSRuleObject, styled } from "styledfc";
import { FlexCss, TextOverFlowCss } from "../../../utils/styledfc";
import { useNavigate } from "react-router-dom";
import { getAllType, baseUrl } from "@/api";
import { useEffect, useState } from "react";
interface KindType {
    id: number;
    name: string;
    img: string;
    desc: string;
    type: string;
}
export default function KindList() {
    const [kindList, setKindList] = useState<KindType[]>([]);
    const navigate = useNavigate();
    useEffect(() => {
        getAllType().then((res) => {
            const { data } = res as { data: KindType[] };
            setKindList(data);
        });
    }, []);

    const pathGo = (type: string) => {
        navigate("/list/kind/" + type);
    };
    return (
        <div className={kindListStyle.className}>
            {kindList.map((item) => (
                <div className="kind__item" key={item.name} onClick={() => pathGo(item.type)}>
                    <div className="kind__item-img">
                        <img src={baseUrl + item.img} />
                    </div>
                    <div className="kind__item-title">
                        {item.name}类<div className="kind__item-desc">{item.desc}</div>
                    </div>
                </div>
            ))}
        </div>
    );
}
const kindListStyle = styled({
    margin: "0 20rem",
    fontSize: "20rem",
    paddingBottom: "20rem",
    ...(FlexCss("auto", "space-between") as CSSRuleObject),
    flexWrap: "wrap",
    ".kind__item": {
        height: "162rem",
        width: "100%",
        borderRadius: " 28rem",
        backgroundColor: "white",
        marginTop: "20rem",
        ...(FlexCss("center", "space-between") as CSSRuleObject),

        ".kind__item-title": {
            fontSize: "30rem",
            width: "50%",
            textAlign: "center",
            fontWeight: "100",
            marginBottom: "10rem",

            ".kind__item-desc": {
                fontSize: "12rem",
                height: "64rem",
                width: "90%",
                marginTop: "8rem",
                ...TextOverFlowCss(4),
                textAlign: "justify",
                lineHeight: "16rem",
            },
        },

        ".kind__item-img": {
            width: "152rem",
            height: "152rem",
            marginLeft: "5rem",
            borderRadius: "26rem",
            overflow: "hidden",

            ">img": {
                height: "100%",
                width: "100%",
            },
        },
    },
});
